<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <style type="text/css">
        body {
            text-align: center;
            padding-top: 20px;
        }
        canvas {
            box-shadow: 0 0 10px #333;
            margin: 0 auto;
        }
    </style>
</head>
<body onload="draw()">
<canvas id="canvas" width="800" height="600">
    你的浏览器太 low 了，请更新~!
</canvas>

<script>
    function draw() {
        var canvas = document.getElementById("canvas");
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');

            // animate 直线运动
            ctx.beginPath();

            /**
             * canvas 的动画原理
             * 1. 绘制图像
             * 2. 清除图像
             * 3. 更新位置
             * 4. 绘制图像
             * 5. 2 3 4 2 3 4
             */
            // 1. 绘制图像
            var x = 0, y = 0, width = 100, height = 100;
            ctx.fillStyle = 'red';
            ctx.fillRect(x, y, width, height);

            var speedX = 2, speedY = 2;

            setInterval(function() {
                // 2. 清除画布
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                // 3. 更新位置
                x += speedX;
                // 判断 x 的值是否大于容器最右侧或小于容器最左侧
                if (x > canvas.width - width || x < 0) {
                    speedX = -speedX;
                }

                y += speedY;
                if (y > canvas.height - height || y < 0) {
                    speedY = -speedY;
                }

                // 4. 绘制图像
                ctx.fillRect(x, y, width, height);
            }, 30);
        }
    }
</script>
</body>
</html>
